<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<style>
	.layout-left {
		width: 59%;
		/*	border: 1px solid RGB(149, 184, 231);*/
		float: left;
		margin: 10px;
	}
	
	.layout-right {
		width: 37%;
		/*	border: 1px solid RGB(149, 184, 231);*/
		float: right;
		margin-top: 10px;
		margin-right: 5px;
	}
	
	.li_level {
		line-height: 24px;
		list-style: none;
		background-image: url(public/images/level.png);
		background-repeat: no-repeat;
		padding-left: 25px;
		background-position: 0px 4px;
		margin: 2px 0px;
	}
	
	li {
		word-break: break-all;
	}
	
	.time {
		color: gray;
	}
	
	.two {
		font-size: 12px;
		float: right;
		padding-left: 10px;
	}
	
	.img_div {
		float: left;
		width: 20px;
		height: 20px;
		padding-top: 4px;
	}
	
	#bandan1,
	#bandan2,
	#bandan3 {
		margin: 10px;
		border-radius: 8px;
		padding: 5px;
		border: 1px solid RGB(221, 221, 221);
		margin-left: 10px;
	}
	
	#bandan1 {
		height: 300px;
	}
</style>
<div class="easyui-layout" fit="true">
	<div data-options="region:'north'" border="true" style="height: 50px;padding: 12px;overflow: hidden;text-align: center;">
		<!--<span style="padding: 8px;font-weight: bold;">个人信息详情</span>-->
		<span style="font-weight: bold;">欢迎来查询${name }的详情界面</span>
	</div>
	<div data-options="region:'center'" border="true">
		<div class="layout-left" style="float: left;width: 500px;">
			<fieldset id="bandan1">
				<legend>考勤详细记录</legend>
				<div style="height: 120%;">
					<div id="container" style="height: 80%; -webkit-tap-highlight-color: transparent; user-select: none; position: relative; background: transparent;" _echarts_instance_="ec_1510900769369">
						<div style="position: relative; overflow: hidden; width: 500px; height: 886px; padding: 0px; margin: 0px; border-width: 0px; cursor: pointer;">
							<canvas width="500" height="886" data-zr-dom-id="zr_0" style="position: absolute;  left: 0px; top: 0px; width: 1120px; height: 886px; user-select: none;
					 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
						</div>
						<div></div>
					</div>
					<script type="text/javascript" src="public/js/echarts-all-3.js"></script>
					<script type="text/javascript">
						var dom = document.getElementById("container");
						var myChart = echarts.init(dom);
						var studentName=${studentName};
						var tijiao=${tijiao};
						var banjiName=${banjiName}
					/* 	alert("studentName:"+studentName);
						alert("tijiao:"+tijiao);
						alert("banjiName:"+banjiName); */
						var app = {};
						option = null;
						option = {
							title: {
								subtext: banjiName
							},
							tooltip: {
								trigger: 'axis'
							},
							legend: {
								data: ['年份', '迟到次数']
							},
							toolbox: {
								show: true,
								feature: {
									dataView: {
										show: true,
										readOnly: false
									},
									magicType: {
										show: true,
										type: ['line', 'bar']
									},
									restore: {
										show: true
									},
									saveAsImage: {
										show: true
									}
								}
							},
							calculable: true,
							xAxis: [{
								type: 'category',
								data: studentName
							}],
							yAxis: [{
								type: 'value'
							}],
							series: [{
								barCategoryGap : '50',
								name: '所占比例',
								type: 'bar',
								data: tijiao,
								itemStyle: {
									normal: {
										color: function(params) {
											var colorList = [
												'#6B9CDE', '#A4E9C1', '#E68900', '#FF6347'
											];
											return colorList[params.dataIndex]
										},
									}
								},
								markPoint: {
									data: [{
										type: 'max',
										name: '最大值'
									}, {
										type: 'min',
										name: '最小值'
									}]
								},
								markLine: {
									data: [{
										type: 'average',
										name: '平均值'
									}]
								}
							}]
						};;
						if(option && typeof option === "object") {
							myChart.setOption(option, true);
						}
					</script>
				</div>
			</fieldset>
			<fieldset id="bandan2">
				<legend>最近完成考试(共${fn:length(maps4)}份试卷)</legend>
				<ul>
					<c:if test="${empty maps4 }">
						<h5>目前还没有提交练习哦~</h5>
					</c:if>
					<c:if test="${maps4!=null }">
						<c:forEach items="${maps4 }">
						  	<li class="li_level">
								<span class="two time">
									<div class="img_div">
								    	<img align="left" src="public/images/your_score.png" title="您的成绩">
								    </div>
								    <c:if test="${maps4.sumCount!=null and maps4.sumCount!=0 and maps4.sumCount!='' }">
								    	<span>${maps4.sumCount }分</span>
								    </c:if>
								     <c:if test="${maps4.sumCount ==0 or maps4.sumCount==null}">
								    	<span>未批改</span>
								    </c:if>
								    
								</span>
								<a href="" title="查看答卷">${maps4.zuoye_name }</a>
							</li>
						</c:forEach>
					</c:if>
				</ul>
			</fieldset>
			<fieldset id="bandan2">
				<legend>最近未完成考试(共${fn:length(maps2)}份试卷)</legend>
				<ul>
					<c:if test="${empty maps2 }">
						<h5>目前还没有提交考试内容哦~</h5>
					</c:if>
					<c:if test="${maps2!=null }">
						<c:forEach items="${maps2 }">
							<li class="li_level">
								<span class="two time">
									<div class="img_div">
								    	<img align="left" src="public/images/your_score.png" title="您的成绩">
								    </div>
								 <c:if test="${maps2.sumCount!=null and maps2.sumCount!=0 and maps2.sumCount!='' }">
								    	<span>${maps2.sumCount }分</span>
								    </c:if>
								     <c:if test="${maps2.sumCount ==0 or maps2.sumCount==null}">
								    	<span>未批改</span>
								    </c:if>
								</span>
								<a href="" title="查看答卷">${maps2.zuoye_name }</a>
							</li>
						</c:forEach>
					</c:if>
				</ul>
			</fieldset>
		</div>
		<div class="layout-right">
			<fieldset id="bandan3">
				<legend>最近完成的练习(共${fn:length(maps3)}份练习)</legend>
				<ul>
					<c:if test="${empty maps3 }">
						<h5>目前还没有提交练习哦~</h5>
					</c:if>
					<c:if test="${maps3!=null }">
						<c:forEach items="${maps3 }" var="maps3">
							<li class="li_level">
								<span class="two time">
									<div class="img_div">
								    	<img align="left" src="public/images/your_score.png" title="您的成绩">
								    </div>
								    <c:if test="${maps3.sumCount!=null and maps3.sumCount!=0 and maps3.sumCount!='' }">
								    	<span>${maps3.sumCount }分</span>
								    </c:if>
								     <c:if test="${maps3.sumCount ==0 or maps3.sumCount==null}">
								    	<span>未批改</span>
								    </c:if>
								</span>
								<a href="" title="查看答卷">${maps3.zuoye_name }</a>
							</li>
						</c:forEach>
					</c:if>
				</ul>
			</fieldset>
			<fieldset id="bandan3">
				<legend>最近未完成的练习(共${fn:length(maps)}份练习)</legend>
				<ul>
				<c:if test="${empty maps }">
					<h5>没有可用的练习哦~</h5>
				</c:if>
					<c:if test="${maps!=null }">
						<c:forEach items="${maps }" var="maps">
							<li class="li_level">
								<span class="two time">
									<div class="img_div">
								    	<img align="left" src="public/images/your_score.png" title="您的成绩">
								    </div>
								    <span>未提交</span>
								</span>
								<a href="" title="查看答卷">${maps.zuoye_name }</a>
							</li>
						</c:forEach>
					</c:if>
				</ul>
			</fieldset>
		</div>
	</div>
</div>ml>